<template>
    <div>
        <van-cell title="搜索历史">
            <div v-if="isDeleteShow">
                <span @click="$emit('ondeleteall')">全部删除</span>
                &nbsp;&nbsp;
                <span @click="isDeleteShow = false">完成</span>
            </div>
            <van-icon v-else name="delete" @click="isDeleteShow = true" />
        </van-cell>
        <van-cell
            :title="item"
            v-for="(item, index) in searchHistory"
            :key="index"
            @click="onDelete(item, index)"
        >
            <van-icon name="close" v-show="isDeleteShow" />
        </van-cell>
    </div>
</template>

<script>
// import { setItem } from '@/utils/storage'

export default {
    props: {
        searchHistory: {
            type: Array,
            required: true
        }
    },
    data () {
        return {
            isDeleteShow: false
        }
    },
    created () { },
    methods: {
        onDelete (item, index) {
            // 判断是否在删除状态
            if (this.isDeleteShow) {
                // 删除对应的搜索历史
                this.searchHistory.splice(index, 1)
                // setItem('search-historys', this.userSearchHistory)
            } else {
                // 进入搜索结果
                this.$emit('search', item)
            }
        }
    }
}
</script>

<style scoped>
</style>
